<template>
	<div id="home-view">
		<!-- 搜索框 -->
		<div class="search-bar">
			<a-input-search
				v-model:value="searchParams.searchText"
				placeholder="从海量图片搜索"
				enter-button="搜索"
				size="large"
				@search="doSearch"
			/>
		</div>
		<!-- 分类和标签筛选 -->
		<a-tabs v-model:active-key="selectedCategory" @change="doSearch">
			<a-tab-pane key="all" tab="全部" />
			<a-tab-pane v-for="category in categoryList" :tab="category" :key="category" />
		</a-tabs>
		<div class="tag-bar">
			<span style="margin-right: 8px">标签：</span>
			<a-space :size="[0, 8]" wrap>
				<a-checkable-tag
					v-for="(tag, index) in tagList"
					:key="tag"
					v-model:checked="selectedTagList[index]"
					@change="doSearch"
				>
					{{ tag }}
				</a-checkable-tag>
			</a-space>
		</div>
		<!-- 图片列表 -->
		<PictureList
			:dataList="dataList"
			:loading="loading"
			:showPagination="true"
			:total="total"
			:current="searchParams.current"
			:pageSize="searchParams.pageSize"
			:onPageChange="onPageChange"
		></PictureList>
	</div>
</template>

<script setup lang="ts">
import { listPictureTagCategoryUsingGet, listPictureVoByPageUsingPost } from '@/api/pictureController'
import { message } from 'ant-design-vue'
import { onMounted, reactive, ref } from 'vue'
import PictureList from '@/components/picture/PictureList.vue'

// 表单数据
const dataList = ref<API.PictureVO[]>([])
const total = ref(0)
const loading = ref(false)

// 搜索条件
const searchParams = reactive<API.PictureQueryRequest>({
	current: 1,
	pageSize: 10,
	sortField: 'createTime',
	sortOrder: 'descend', // 修正为降序，最新图片在前
	nullSpaceId: true, // 主页查询公共图库
})

// 分页参数
const onPageChange = (page: number, pageSize: number) => {
	searchParams.current = page
	searchParams.pageSize = pageSize
	fetchData()
}

// 获取数据
const fetchData = async () => {
	try {
		loading.value = true
		// 构建查询参数
		const params: API.PictureQueryRequest = {
			...searchParams,
			// 确保主页查询公共图库
			nullSpaceId: true,
			tags: [] as string[],
		}

		// 设置分类筛选
		if (selectedCategory.value !== 'all') {
			params.category = selectedCategory.value
		}

		// 设置标签筛选：[true, false, false, true] => ['tag1', 'tag4']
		selectedTagList.value.forEach((useTag, index) => {
			if (useTag) {
				params.tags!.push(tagList.value[index])
			}
		})

		const res = await listPictureVoByPageUsingPost({
			...params,
		})
		if (res.data.code === 0 && res.data.data) {
			dataList.value = res.data.data.records ?? []
			total.value = res.data.data.total || 0
		} else {
			message.error('获取数据失败：' + res.data.message)
		}
	} catch {
		message.error('网络错误，请稍后再试')
	} finally {
		loading.value = false
	}
}

// 搜索操作
const doSearch = () => {
	// 重置当前页为1
	searchParams.current = 1
	// 重新获取数据
	fetchData()
}

// 标签和分页列表
const categoryList = ref<string[]>([])
const selectedCategory = ref<string>('all')
const tagList = ref<string[]>([])
const selectedTagList = ref<boolean[]>([])

// 获取分类和标签列表
const getTagCategoryOptions = async () => {
	const res = await listPictureTagCategoryUsingGet()
	if (res.data.code === 0 && res.data.data) {
		tagList.value = res.data.data.tagList ?? []
		categoryList.value = res.data.data.categoryList ?? []
	} else {
		message.error('获取标签分类列表失败' + res.data.message)
	}
}

onMounted(() => {
	// 页面加载时获取数据
	getTagCategoryOptions()
	fetchData()
})
</script>

<style scoped lang="scss">
#home-view {
	.search-bar {
		max-width: 480px;
		margin: 0 auto 16px;
	}
	.tag-bar {
		margin-bottom: 16px;
	}
}
</style>
